<template>
  <div>
		<!-- 图表 -->
    <div :id="id" class="pie-annular-chart" />
  </div>
</template>

<script>
import * as echarts5 from 'echarts5';
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
/* mixins */
import ChartsMixin from '@src/modules/report/managementReport/charts/components/mixins/charts.mixins';

export default {
  name: 'pie-annular-chart',
  mixins: [ChartsMixin],
  props: {
    chartType: {
      type: String,
			default: ''
    },
    chartData: {
      type: Object,
      default: () => ({})
    },
    id: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const chart = ref(null)
    
    const chartData = computed(() => {
			return props.chartData
		})
		watch(chartData, (n,o) => {
			drawChart()
		})
    
    const initChart = () => {
      chart.value = echarts5.init(document.getElementById(props.id), 'shb')
      drawChart()
    }

    const drawChart = () => {
      const {
        serviceCount,
        spareCount,
        spareCompared,
        spareRingRatio,
        spareRate,
        serviceCompared,
        serviceRingRatio,
        serviceRate
      } = props.chartData

      const setFormatter = (params) => {
        let countNums = ''
        let compared = '' 
        let ringRatio = ''
        let rate = '' 
        if (params.name === '备件'){
          countNums = spareCount
          compared = spareCompared
          ringRatio = spareRingRatio || 0 
          rate = spareRate || 0
        } else if (params.name === '服务项目'){
          countNums = serviceCount
          compared = serviceCompared
          ringRatio = serviceRingRatio || 0
          rate = serviceRate || 0
        }
        return `
        ${params.name}: ${rate}%<br/>
        收入: ¥${countNums}<br/>
        同比: ${compared}%<br/>
        环比: ${ringRatio}%
        `
      }

      const legendFormatter = (name) => {
        if (name === '备件') return `${name} ¥${spareCount}`
        if (name === '服务项目') return `${name} ¥${serviceCount}`
      }

      const dataOption = {
        tooltip: {
          trigger: 'item',
          formatter: setFormatter
        },
        color: ['rgba(176, 212, 251, 1)'], 
        legend: {
          orient: 'vertical',
          icon: 'circle',
          top: '50%',
          right: '2%',
          data:[ '备件', '服务项目'],
          trigger: 'axis',
          formatter: legendFormatter,
        },
        series: [
          {
            name: '总收入',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '16'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: spareRate, // 后端还没加好这个值
                name: '备件',
                itemStyle: {
                  normal: {
                    color: { // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: '#FFB85EFF' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#FF801EFF' // 100% 处的颜色
                        }
                      ]
                    }
                  } 
                }
              }, 
              {
                name: '服务项目',
                value: serviceRate,
                itemStyle: {
                  normal: {
                    color: { // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: '#5E85FFFF' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#5EB3FEFF' // 100% 处的颜色
                        }
                      ]
                    }
                  } 
                }
              }
            ]
          }
        ]
      }
      chart.value.clear()
      chart.value.setOption(dataOption)
      nextTick(() => {
        chart.value.resize()
      })
    }

    onMounted(() => {
      initChart()
    })

    onUnmounted(() => {
      if (!chart.value) return
      chart.value = null
    })

    return {
      chart,
      initChart
		}
  },
};
</script>

<style lang="scss" scoped>

.pie-annular-chart {
	width: 100%;
	min-height: 260px;
}
</style>
